<template>
  <div>
    <GQuerySearch placeholder="请输入查询条件1" @setValue="setQuery" />
    <!-- <GQuerySearch placeholder="请输入查询条件1" @setValue="show1" /> -->
    <GQuerySearch placeholder="请输入查询条件2">
      <template #btn="{ query }">
        <el-button type="primary" @click="setQuery(query)">搜索</el-button>
      </template>
    </GQuerySearch>
    <!-- <GQuerySearch placeholder="请输入查询条件2" @setValue="setQuery">
      <template #btn>
        <el-button type="primary" @click="show2">搜索</el-button>
      </template>
    </GQuerySearch> -->
    <!-- <div>申请列表</div> -->
    <!-- <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"> -->
    <GTable
      :showLoading="showLoading"
      usePager
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :pager="frontPager"
      :data="tableData"
      stripe
      border
      :columns="columns"
      :conf="tableConf"
    >
      <template #birthday="{ row }">
        <span>{{ row.birthday | birthday }}</span>
      </template>
      <template #sex="{ row }">
        <span>{{ row.sex | sex }}</span>
      </template>
      <template #education="{ row }">
        <span>{{ row.education | education }}</span>
      </template>
      <template #status="{ row }">
        <el-tag :type="row.status | statusColor">{{
          row.status | status
        }}</el-tag>
      </template>
      <template #operation="{ row }">
        <el-button type="primary" @click="showEditForm(row)">编辑</el-button>
        <el-button type="danger" @click="delLoan(row.id)">删除</el-button>
        <el-button type="success" @click="submit(row.id)">提交审核</el-button>
        <!-- <el-button type="primary" size="mini">编辑{{ row.name }}</el-button>
      <el-button type="danger" size="mini">删除{{ row.name }}</el-button> -->
      </template>
    </GTable>
    <el-dialog
      :visible.sync="showEdit"
      @open="innerShow = true"
      @closed="innerShow = false"
      width="30%"
      center
      :before-close="doClose"
    >
      <p slot="title">申请管理-编辑</p>
      <GFormCreator ref="form1" v-if="innerShow" :config="editForm">
        <span slot="btn"></span>
      </GFormCreator>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEdit">确 定</el-button>
        <el-button @click="showEdit = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getLoanList } from '@/api/loan'
import { columns, tableConf, genEditForm } from './pageConf'
import pager from '@/mixins/pager'
import crud from '@/mixins/crud'
import { updateLoanInfo, deleteLoanById, submitLoanById } from '@/api/loan'
// let pager = {
//   pageNo: 1,
//   pageSize: 10,
//   // name:''
// }
export default {
  name: 'input-manager',
  mixins: [pager, crud],
  beforeDestroy(){
    console.log(this.$options.name+"被销毁了")
  },
  data() {
    return {
      columns,
      tableConf,
      // tableData: [],
      showEdit: false,
      editForm: null,
      innerShow: false,
      // showLoading:false
      // tableConf: {
      //   multipleSelection: true,
      //   index: true,
      // },
      //   columns: [
      //     // {
      //     //   type: 'selection',
      //     //   width: 55,
      //     // },
      //     {
      //       prop: 'date',
      //       label: '日期',
      //       width: 120,
      //       align:'center'
      //     },
      //     {
      //       prop: 'name',
      //       label: '姓名',
      //       width: 120,  align:'center'
      //     },
      //     {
      //       prop: 'address',
      //       label: '地址',  align:'center'
      //     },
      //     {
      //       label: '配送信息',
      //       align:'center',
      //       children: [
      //         {
      //           label: '地址', align:'center',
      //           children: [
      //             { label: '省份', align:'center', prop: 'name' },
      //             { label: '市区', align:'center', },
      //             { label: '街道', align:'center', prop: 'address' },
      //           ],
      //         },
      //       ],
      //     },
      //     {
      //       label: '操作',
      //       align:'center',
      //       prop: 'operation',
      //       width: 300,
      //     },
      //     {
      //     width:400,
      //     label: '显示html',
      //     prop: 'xxx',
      //     align:'center',
      //     formatter(prop) {
      //         return `<div>
      //         <h2>${prop.row.name}这是自定义html</h2>
      //         <button>按钮</button>
      //     </div>`
      //     }
      // }
      //   ],
      //tableData: [
      // {
      //   date: '2016-05-03',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-04',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-01',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-08',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-06',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      // {
      //   date: '2016-05-07',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄',
      // },
      //],
    }
  },
  /*async*/ created() {
    // 测试代码
    // this.showLoading=true
    this.load()
    // this.showLoading=false
    // this.init();
    // const res = await getLoanList(this.apiPager)
    // // res?.data?.data?.data?.data;
    // console.log('数据:', res)
    // this.tableData = res.data.data
  },
  methods: {
    beforeInit() {
      this.loadUrl = '/loan/list'
      return true
    },
    showEditForm(row) {
      this.editData = row
      this.editForm = genEditForm(row)
      this.showEdit = true
    },
    doClose() {
      this.showEdit = false
    },
    async saveEdit() {
      let data = this.$refs.form1.getData()
      let isContinue = await this.$gConfirm('是否确定保存')
      if (!isContinue) return

      this.showEdit = false // todo 确定以后再取消
      // 发请求
      let res = await updateLoanInfo({
        ...this.editData,
        ...data,
      })
      this.$message.success('保存成功')
      this.load()
    },
    async submit(id) {
      let isSubmit = await this.$gConfirm('是否确定提交审核?')
      if (!isSubmit) return
      await submitLoanById(id)
      this.$message.success('提交成功成功')
      this.load()
    },
    async delLoan(id) {
      let isDel = await this.$gConfirm('是否确定删除?')
      if (!isDel) return
      await deleteLoanById(id)
      this.$message.success('删除成功')
      this.load()
    },
    // show1(q) {
    //   console.log('外部接收到数据:', q)
    // },
    // show2(query) {
    //   this.setQuery(query)
    //   console.log('外部接收到数据:', query)
    // },
    // handleSizeChange(val) {
    //   console.log(`每页 ${val} 条`)
    // },
    // handleCurrentChange(val) {
    //   console.log(`当前页: ${val}`)
    // },
  },
}
</script>
